<template>
<!--  <el-menu :default-openeds="['/device']" :default-active="'/device/'" router>-->
<!--  <el-menu :default-active="app.activePath" :default-openeds="['/home/system']" router active-text-color="rgb(0,160,255)" background-color="rgb(41,66,86)" text-color="#fff">-->
<!--    <el-sub-menu index="/home/system">-->
<!--      <template #title>-->
<!--        <el-icon><message /></el-icon>系统管理-->
<!--      </template>-->
<!--      <el-menu-item-group>-->
<!--        <el-menu-item index="/home/system/user">用户管理</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--      <el-menu-item-group>-->
<!--        <el-menu-item index="/home/system/role">角色管理</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--      <el-menu-item-group>-->
<!--        <el-menu-item index="/home/system/permission">权限管理</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--      <el-menu-item-group>-->
<!--        <el-menu-item index="/home/system/dictionary">字典管理</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--      <el-menu-item-group>-->
<!--        <el-menu-item index="/home/system/test">测试管理</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--      <el-menu-item-group>-->
<!--        <el-menu-item index="/login">登录管理</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--    </el-sub-menu>-->
<!--  </el-menu>-->
  <el-menu :default-active="app.activePath"  class="el-menu-demo" @select="handleSelect" active-text-color="rgb(0,160,255)" background-color="rgb(41,66,86)" text-color="#fff" unique-opened>
    <el-sub-menu v-for="item in menuList" :key="item.permissionId" :index="item.path">
      <template #title>
<!--        <i :class="item.icon"></i>-->
        <el-avatar
            :src="item.icon?item.icon:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
            size="small"
            shape="square"
            style="width: 20px;height: 20px; margin-right: 5px;"
        />
        {{ item.permissionName }}
      </template>
      <el-menu-item v-for="child in item.children" :key="child.permissionId" :index="child.path">
<!--        <i :class="child.icon"></i>-->
        <el-avatar
            :src="child.icon?child.icon:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
            size="small"
            shape="square"
            style="width: 20px;height: 20px; margin-right: 5px;"
        />
        {{ child.permissionName }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { Message } from '@element-plus/icons-vue'
import appStore from "@/store/appStore.ts";
import {useRoute} from "vue-router";
import {Permission} from "@/api/type/model.ts";
const app = appStore()
const route = useRoute()
const router = useRouter()

watch(()=>route.path,(newVal)=>{
  app.activePath = newVal
},{immediate:true})

defineProps<{ menuList: Permission[] }>()

console.log(app.activePath.split('/'))


const handleSelect = (key, keyPath) => {
  router.push(keyPath[1])
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
.el-tabs__content {
  padding: 0 !important;
}

</style>